import React, { useState, useEffect } from 'react';
import lodash from 'lodash';
import { Select, Spin, Empty } from 'antd';
import { delectProps } from '../utils';
import { connect } from 'umi';
const SelectBlock = (props) => {
    const {
        type,
        label: plabel,
        suffix,
        loading,
        placeholder,
        fieldNames = {},
        onchange,
        dispatch
    } = props;
    useEffect(() => {
        fetchList()
    }, [])
    const fetchList = () => {
        dispatch({
            type: 'promoter/fetchListPromoterGroup',
            payload: {
                page: 1,
                limit: 999
            },
            callback: (e) => {
                setList(e)
            }
        })
    }
    const [list, setList] = useState([])
    const divProps = delectProps(props);
    const { label = 'groupName', value = 'id', tip = 'otherData' } = fieldNames;

    // 遍历对象
    const arrObject = (obj) => {
        return Object.keys(obj).map((item) => ({
            [label]: obj[item],
            [value]: item,
        }));
    };

    /**
     *  判断传入select 类型
     *  [] | {}
     */
    let selectList = [];
    if (Array.isArray(list)) {
        selectList = list;
    } else if (lodash.isPlainObject(list)) {
        // 若为对象则将遍历成数组赋值
        selectList = arrObject(list);
    }

    // type === tags 配置
    let multProps = {};
    if (type === 'tags') multProps = { mode: 'tags', tokenSeparators: [',', '，'] };
    // type === multiple 配置
    if (type === 'multiple') multProps = { mode: 'multiple', tokenSeparators: [',', '，'] };
    console.log(selectList, 'list')
    return (
        <>
            <Select
                showSearch
                defaultActiveFirstOption={false}
                dropdownMatchSelectWidth={false}
                style={{ width: suffix ? '75%' : '100%' }}
                optionFilterProp="children"
                notFoundContent={
                    loading ? <Spin size="small" /> : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                }
                loading={loading}
                {...multProps}
                {...divProps}
                placeholder={placeholder || `请选择${plabel}`}
            >
                {selectList.map((data, j) => {
                    if (data) {
                        const nameD = data[label];
                        // 兼容数组
                        const valueData = !data[value] ? `${j}` : data[value];
                        const nameData = nameD ? nameD : typeof data == 'string' ? data : '--';
                        const otherData = data[tip] ? data[tip] : '';
                        return (
                            <Select.Option
                                key={data[value] || j}
                                disabled={data.disabled || false}
                                value={valueData}
                                option={data}
                            >
                                {nameData}
                                {otherData && <div style={{ fontSize: 12, color: '#989898' }}>{otherData}</div>}
                            </Select.Option>
                        );
                    }
                })}
            </Select>
            {suffix && <span style={{ marginLeft: 10 }}>{suffix}</span>}
        </>
    );
};

export default connect(({ promoter, loading }) => ({
    loading: loading.models.promoter,
}))(SelectBlock);

